<template>
    <div class="content_panel project_modules amount_remission_wait_list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('collection.waitAmountRemit')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="orderId">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable></el-input><!--内部订单号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="phone">
                            <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')"> clearable></el-input><!--手机号码-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userName">
                            <el-input v-model="form.userName" :placeholder="$t('common.name')" clearable></el-input><!--姓名-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="derateType">
                            <el-select v-model="form.derateType" clearable :placeholder="$t('common.remitType')" style="width: 100%"><!--减免类型-->
                                <el-option key="0" :label="$t('common.validityRemit')" value="0"><!--有效期减免--></el-option>
                                <el-option key="1" :label="$t('common.foreverRemit')" value="1"><!--永久性减免--></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="productChannel" label="">
                            <el-input v-model="form.productChannel" :placeholder="$t('common.applicationMarket')" clearable></el-input><!--应用市场-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="source" label="">
                            <el-input v-model="form.source" :placeholder="$t('common.applyChannel')" clearable></el-input><!--申请渠道-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appVersion" label="">
                            <el-input v-model="form.appVersion" :placeholder="$t('common.versionName')" clearable></el-input><!--版本号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appPackage" label="">
                            <el-input v-model="form.appPackage" :placeholder="$t('system.appPackage')" clearable></el-input><!--app包名-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="applyTime" style="width: 100%"><!--申请时间-->
                            <el-date-picker
                                    v-model="form.applyTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    style="width: 100%;"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.applyStartTime')"
                                    :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!-- 伪名 -->
                    <el-col :span="4">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item prop="kana" v-else> <!--姓名-->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    
                    
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="exportData" type="primary">{{ $t('common.export') }}</el-button>
                    </el-col>
                    <!--自动审核-->
                    <el-col :span="4">
                        <el-form-item>
                            {{ $t('common.autoReview') }}: <el-switch @change="updateAuditStatus" v-model="autoSwitch" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight"
                              :highlight-current-row="true">
                        <el-table-column prop="derateId" :label="$t('common.remitApplyId')" min-width="160"></el-table-column><!--减免申请编号-->
                        <el-table-column prop="orderId" :label="$t('common.innerOrderId')" min-width="180"></el-table-column><!--内部订单号-->
                        <el-table-column prop="userName" :label="$t('common.borrowerName')" min-width="120"></el-table-column><!--借款人姓名-->
                        <el-table-column prop="phone" :label="$t('common.borrowerMobile')" min-width="140"></el-table-column><!--借款人手机号-->
                        <el-table-column prop="derateApplyTime" :label="$t('common.applyDate')" min-width="160"><!--申请时间-->
                            <template slot-scope="{ row }">{{ row.derateApplyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="totalPeriods" v-if="showSpread" :label="$t('install.totalBorrowPeriod')" min-width="150"></el-table-column><!--借款总周期-->
                        <el-table-column prop="currentPeriod" v-if="showSpread" :label="$t('install.currentBorrowPeriod')" min-width="150"></el-table-column><!--借款当前周期-->

                        <el-table-column prop="derateAmount" :label="$t('common.remitAmount')" min-width="100"><!--减免金额-->
                            <template slot-scope="{ row }">{{ row.derateAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.restRepay')" prop="restRepay" min-width="90"><!--挂账金额-->
                            <template slot-scope="{ row }">{{ row.restRepay | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column prop="teamName" :label="$t('common.overduePeriod')" min-width="90"></el-table-column><!--逾期阶段-->
                        <el-table-column prop="derateType" :label="$t('common.remitType')" min-width="120"><!--减免类型-->
                            <template slot-scope="{ row }">{{ row.derateType | switchDerateType }}</template>
                        </el-table-column>
                        <el-table-column prop="collectionUserName" :label="$t('common.applyPerson')" min-width="120"></el-table-column><!--申请人-->

                        <el-table-column prop="reason" :label="$t('common.applyReason')" :show-overflow-tooltip="true" min-width="180"></el-table-column><!--申请理由-->
                        <el-table-column prop="validiteTime" :label="$t('common.validityPeriod')" min-width="160"><!--有效期-->
                            <template slot-scope="{ row }">{{ row.validiteTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.applicationMarket')" prop="productChannel" width="130"></el-table-column><!--应用市场-->
                        <el-table-column :label="$t('common.applyChannel')" prop="source" min-width="130"></el-table-column><!--申请渠道-->
                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130">
                            <template slot-scope="{ row }">{{ row.appName | switchAppName }}</template>
                        </el-table-column><!--APP名称-->
                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130">
                            <template slot-scope="{ row }">{{ row.kana | switchProductName }}</template>
                        </el-table-column><!--伪名-->

                        <el-table-column :label="$t('common.versionName')" prop="appVersion" min-width="130"></el-table-column><!--版本号-->
                        <el-table-column :label="$t('system.appPackage')" prop="appPackage" min-width="130"></el-table-column><!--APP包名-->
                        <el-table-column v-if="isCanRemission" :label="$t('common.operation')" min-width="160">
                            <template slot-scope="scope">
                                <el-button @click="toggleApplyDialog(scope.row)" type="primary">{{ $t('common.review') }}</el-button><!--审核-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
                </div>
            </div>
        </div>

        <alert-dialog :title="$t('common.remitReview')" class="applyDialog" width="700px" :visible.sync="applyDialog.isVisible">
            <el-form :model="applyDialog.form" :rules="applyDialog.rules" ref="applyDialog.form">
                <el-form-item :label="$t('common.borrowerName') + '：'"><!--借款人姓名-->
                    {{ applyDialog.form.userName }}
                </el-form-item>
                <el-form-item :label="$t('common.innerOrderId') + '：'"><!--内部订单号-->
                    {{ applyDialog.form.orderId }}
                </el-form-item>
                <el-form-item :label="$t('common.overduePeriod') + '：'"><!--逾期阶段-->
                    {{ applyDialog.form.teamName }}
                </el-form-item>

                <el-form-item v-if="showSpread"  :label="$t('install.currentBorrowPeriod') + '：'"><!--借款当前周期-->
                    {{ applyDialog.form.currentPeriod }}
                </el-form-item>
                <el-form-item v-if="showSpread"  :label="$t('install.totalBorrowPeriod') + '：'"><!--借款总周期-->
                    {{ applyDialog.form.totalPeriods }}
                </el-form-item>

                <el-form-item :label="$t('common.remitType') + '：'"><!--减免类型-->
                    {{ applyDialog.form.derateType | switchDerateType }}
                </el-form-item>
                <el-form-item :label="$t('common.canRemitAmount') + '：'"><!--可减免金额-->
                    {{ applyDialog.form.canDerateAmount }}
                </el-form-item>
                <el-form-item :label="$t('common.applyRemitAmount') + '：'"><!--申请减免金额-->
                    {{ applyDialog.form.derateAmount }}
                </el-form-item>
                <el-form-item v-if="applyDialog.form.derateType == '0'" :label="$t('common.validityPeriod') + '：'"><!--有效期-->
                    {{ applyDialog.form.validiteTime | formatDate('yyyy-MM-dd hh:mm:ss') }}
                </el-form-item>
                <el-form-item :label="$t('common.applyReason') + '：'"><!--申请理由-->
                    {{ applyDialog.form.reason }}
                </el-form-item>
                <el-form-item :label="$t('common.remark') + '：'" prop="collectionRemark"><!--备注-->
                    <el-input v-model="applyDialog.collectionRemark" type="textarea" :rows="3" maxlength="200" :placeholder="$t('verify.plsInput')" clearable style="width: 280px"></el-input>
                </el-form-item>
                <el-form-item :label="$t('common.reviewResult') + '：'"><!--审核结果-->
                    <el-radio-group v-model="applyDialog.derateResult">
                        <el-radio key="5" label="5">{{ $t('common.pass') }}</el-radio><!--通过-->
                        <el-radio key="4" label="4">{{ $t('common.refuse') }}</el-radio><!--拒绝-->
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="applyHandler" type="primary">{{ $t('common.confirm') }}</el-button>
                <el-button @click="applyDialog.isVisible = false" type="default">{{ $t('common.cancel') }}</el-button>
            </div>
        </alert-dialog>
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import AlertDialog from '@/components/alert-dialog';
    import SelectAppList from '@/components/select-app-list';
    import {domain} from '@/config/'
    import SelectKanaList from '@/components/select-kana-list';

    let that = null;
    export default {
        name: 'collection-amountRemit-waitList',
        components: {
            Pagination,
            AlertDialog,
            SelectAppList,
            SelectKanaList
        },
        mixins: [mixin],
        data() {
            return {
                showSpread:false,
                tableData: [],
                domain:'',
                form: {
                    orderId: '',
                    phone: '',
                    userName: '',
                    applyTime: [],
                    derateType: '',
                    productChannel: '',
                    source: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    appVersion: '',
                    appPackage: '',
                },
                rules: {
                    orderId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    phone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                },
                applyDialog: {
                    isVisible: false,
                    form: {},
                    collectionRemark: '',
                    derateResult: '5',
                    rules: {}
                },
                autoSwitch: 0, // 自动审核 状态：0-关,1-开
            };
        },
        computed: {//是否拥有金额减免权限
            isCanRemission() {
                return this.$store.getters.checkUserAuthority('/amount-remission/wait-list/remission');
            },
        },
        methods: {
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.collection.queryWaitAuditRecordOfAmountDeduction(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                        //防止类似总共21条数据，第21条操作后变成20条数据，但请求页数依旧是第2页
                        if (this.tableData.length == 0 && page.currentPage > 1) {
                            this.getTableData({currentPage: page.currentPage - 1});
                        }
                    }
                    this.tableMaxHeight = document.body.clientHeight - 260;
                });
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    orderId: '',
                    phone: '',
                    userName: '',
                    derateType: '',
                    productChannel: '',
                    source: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    appVersion: '',
                    appPackage: '',
                    derateApplyTimeStart: '',
                    derateApplyTimeEnd: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                if (form.applyTime && form.applyTime.length >= 2) {
                    params.derateApplyTimeStart = form.applyTime[0];
                    params.derateApplyTimeEnd = form.applyTime[1];
                }
                return params;
            },
            search() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                })
            },
            exportData() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        const params = this.fillParams();
                        const user = this.$storage.get('user');
                        const language = this.$storage.getLocal('language');
                        params.language = language;
                        params.token = user.token;
                        params.source = encodeURIComponent(params.source); //针对特殊渠道转码
                        const {$apiConf} = this;
                        const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.collection.exprotWaitAuditRecordOfAmountDeductionExcel, ['page']);
                        this.$openNewBlank(url);
                    }
                })
            },
            //审核金额减免
            toggleApplyDialog(row) {
                this.applyDialog.form = row;
                this.applyDialog.derateResult = '5';
                this.applyDialog.isVisible = true;
            },
            //确认审核
            applyHandler() {
                if (!this.applyDialog.collectionRemark) {
                    this.$message.warning(this.$t('verify.plsInputRemark'));//请填写备注
                    return
                }
                const form = this.applyDialog.form;
                const params = {
                    orderId: form.orderId,
                    derateResult: this.applyDialog.derateResult,
                    derateId: form.derateId,
                    collectionAuditor: this.$storage.get('user').username,
                    collectionRemark: this.applyDialog.collectionRemark
                };
                this.$api.collection.confirmDerateAmount(params).then(res => {
                    const {status, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.$message.success(this.$t('common.successfulOperation'));
                        this.applyDialog.isVisible = false;
                        this.getTableData();
                    }
                });
            },
            // 查询自动审核状态
            queryAuditStatus() {
                this.$api.collection.queryAutoAuditDerateCfg().then(res => {
                    const { status, data } = res;
                    if ('1' === status) {
                        this.autoSwitch = data.status;
                    }
                });
            },
            // 更新自动审核状态
            updateAuditStatus(status) {
                console.log(status, Date.now());
                const params = {
                    status: status, // 状态：0-关,1-开
                };
                this.$api.collection.editAutoAuditDerateCfg(params).then(res => {
                    const { status } = res;
                    if ('1' === status) {
                        this.$message.success(this.$tc('common.successfulOperation'));
                    }
                    this.queryAuditStatus();
                });
            },
        },
        filters: {
            //金额减免类型
            switchDerateType(type) {
                switch (type + '') {
                    case '0':
                        return that.$t('common.validityRemit');// 有效期减免
                    case '1':
                        return that.$t('common.foreverRemit');// 永久性减免
                    default:
                        return '';
                }
            }
        },
        created() {
            this.domain = this.$storage.get('user').domain
            this.showSpread = domain.showSpread();
            that = this;
            this.getTableData();
            this.queryAuditStatus();
        }
    }
</script>
<style lang="scss">
    //.amount_remission_wait_list {
    //    .applyDialog {
    //        .el-form {
    //            padding: 0 30px;
    //            .el-form-item {
    //                word-break: break-all;
    //                margin-bottom: 14px;
    //                .el-form-item__label {
    //                    width: 240px;
    //                    text-align: right;
    //                    padding: 0px;
    //                }
    //                .el-form-item__error {
    //                    padding: 2px 0 0 240px;
    //                }
    //            }
    //        }
    //
    //    }
    //}
</style>
<style lang="scss" scoped>
    //[data-page=collection-amountRemit-waitList] {
    //    .el-col {
    //        padding-left: 10px;
    //    }
    //    .el-table .cell, .el-table th > .cell {
    //        word-break: keep-all;
    //        word-wrap: break-word;
    //    }
    //}
</style>

